<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书管理系统</title>
  <script src="js/jquery-3.6.0.min.js"></script>
  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/jquery.cookie.min.js"></script>
  <script src="js/nav.js"></script>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- 引入图标 -->
  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">   
  <link rel="stylesheet" href="css/nav.css">
  <style>

    *{
      margin: 0;
      padding: 0;
    }
    /* .window table{

    width:100%;
    border:1;
} */
.booktable{
    width:100%;
    border:1px inset black;

    /* background-color: rgb(44, 233, 27); */
}

.booktable tr{
    text-align: center;
    vertical-align:middle;
    border:1px inset black;
}

.booktable th{
  height: 60px;
    border:1px inset black;
}
.note{
  font-size: 18px;
}
</style>

</head>
<body>
    <!-- 页面导航 -->
    <nav>
      <ul class="nav justify-content-center nav-pills">
        <li class="nav-item">
          <a class="nav-link" href="index.html">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link "  href="search.html">查询</a>
        </li>
        <li class="nav-item">
          <a class="nav-link  active" href="borrow.html">借书</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="return.html">归还</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="person.html">个人信息</a>
        </li>
      </ul>
    </nav>

    <div class="container">
      <br><br><br>
      <table class="booktable" cellpadding="20" cellspacing="1">
        <thead>
          <tr>
            <th colspan="5" style="font-weight: bolder;font-size: 24px;"> 我的借书</th>
          </tr>
          <tr style="font-weight: bolder;font-size: 20px;">
              <th>书籍名</th>
              <th>作者</th>
              <th>出版社</th>
              <th>借阅时间（天）</th>
              <th>操作</th>
          </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
          <tr>
            <th colspan="5">
              <button type="button" class="btn btn-primary borrow-btn">一键借书</button>
            </th>
          </tr>
          <tr>
            <th colspan="5" style="font-size: 18px; font-weight: normal;text-align:left;padding: 0 20px;" >
                <p class="note">请注意您每次借书的时间，请在规定的时间内归还或续借图书，否则因此产生的违约金将由您自己承担</p>
                <!-- <p class="note"></p> -->
              
            </th>
          </tr>
        </tfoot>
    </table>
    <br><br><br>

      
    </div>
    <script>
      // 在页面加载完毕之后获取用户书架书籍并渲染到页面上
      $(document).ready(function () {
        var userInfo=sessionStorage.getItem('userInfo')
        userInfo=JSON.parse(userInfo)
        var borrowTime=userInfo.readerType.canLendDay
        var books=sessionStorage.getItem('books')
        if(books===undefined||books===null){
          alert('您还未选择需要借阅的书籍！')
        }else{
          books=JSON.parse(books)
          updataBorrowView(books,userInfo)
        }
        // 获取用户已借书籍信息，并提示用户借书数量
        $.post(
          'http://localhost:8080/QueryRdBookController',
          {
            rdId:userInfo.reader.rdId
          },
          function(data,status){
            if(status==='success'){
              // 用户已借书籍与将借书籍总数，判断是否能借这么多
              data=JSON.parse(data)
              var borrowBooksNum=data.data.length+books.length
              if(borrowBooksNum>userInfo.readerType.canLendQty){
                alert('请注意，您的已借书籍与您即将借阅的书籍数量总数已超过您所能借阅的最大书籍数量，请您根据您的情况作出处理')
              }
            }
          }
        )
      });
      // 更新借书视图
      function updataBorrowView(books,userInfo){
        $("tbody").empty();
        var borrowTime=userInfo.readerType.canLendDay
        for(var i=0;i<books.length;i++){
            var html=`
            <tr  style="font-family: '新宋体','宋体';font-size: 18px;"> 
              <th>${books[i].bkName}</th>
              <th>${books[i].bkAuthor}</th>
              <th>${books[i].bkPress}</th>
              <th>${borrowTime}</th>
              <th>
                <button type="button" class="btn btn-light delete-btn">删除</button>
              </th>
            </tr> 
            `
            $('tbody').append(html)
          }
      }
      //  为删除按钮注册事件
      $('tbody').on("click",'.delete-btn',function(e){
        var index =$(e.target.parentNode.parentNode).index()
        var books=JSON.parse(sessionStorage.getItem('books')) 
        var userInfo=JSON.parse(sessionStorage.getItem('userInfo')) 
        books.splice(index,1)
        sessionStorage.removeItem('books')
        sessionStorage.setItem('books',JSON.stringify(books))
        
        updataBorrowView(books,userInfo)
      })
      $('.borrow-btn').click(function(){
        var books=JSON.parse(sessionStorage.getItem('books')) 
        var userInfo=JSON.parse(sessionStorage.getItem('userInfo')) 
        var borrowBooks=[]
        if(books.length<=0){
          alert('您还未选择书籍')
        }
        // console.log(userInfo.reader.rdId);
        var redId=userInfo.reader.rdId
        if(redId===undefined){
          alert('您的信息不正确，请重新登录')
        }
        var bkids=[]
        for(var i=0;i<books.length;i++){
          bkids.push(books[i].bkId)
        }
        // console.log(borrowBooks);
        // var json= {          
        //     rdId:redId,
        //     bkIds:bkids,
        //     readerTypeDayNum:100
        // }

        bkids = JSON.stringify(bkids);

        console.log(bkids);
        $.post(
          'http://localhost:8080/LendBookController',
          {
            rdId:redId,
            bkIds:bkids,
            readerTypeDayNum:100
          },
          // json,
          function(data,status){
            if(status==='success'){
              sessionStorage.removeItem('books')
              books=[]
              updataBorrowView(books,userInfo)
              alert('借书成功')
            }
          }

        )
      })
      // var temp=[{"bkId":3,"dateBorrow":"","dateLendAct":"","dateLendPlan":"","rdId":4,"state":0},{"bkId":1,"dateBorrow":"","dateLendAct":"","dateLendPlan":"","rdId":3,"state":0}]
    </script>
</body>
</html>